import { expect } from 'chai'

class {
    onMount() {
        var components = window.components || (window.components = {});
        components["two-args"] = this;
    }
    handleColorClick(color, type) {
        this.color = { color: color, type: type };
    }

    test(helpers) {
        var liEls = this.el.querySelectorAll("ul.primary li");

        helpers.triggerMouseEvent(liEls[0], "click");
        expect(this.color).to.deep.equal({ color: "red", type: "primary" });

        helpers.triggerMouseEvent(liEls[1], "click");
        expect(this.color).to.deep.equal({ color: "green", type: "primary" });

        helpers.triggerMouseEvent(liEls[2], "click");
        expect(this.color).to.deep.equal({ color: "blue", type: "primary" });

        liEls = this.el.querySelectorAll("ul.secondary li");

        helpers.triggerMouseEvent(liEls[0], "click");
        expect(this.color).to.deep.equal({ color: "red", type: "secondary" });

        helpers.triggerMouseEvent(liEls[1], "click");
        expect(this.color).to.deep.equal({ color: "green", type: "secondary" });

        helpers.triggerMouseEvent(liEls[2], "click");
        expect(this.color).to.deep.equal({ color: "blue", type: "secondary" });
    }
}

<div>
    <ul.primary>
        <for|color| of=input.colors>
            <li onClick("handleColorClick", color, "primary")>${color}</li>
        </for>
    </ul>
    <ul.secondary>
        <for|color| of=input.colors>
            <li onClick("handleColorClick", color, "secondary")>${color}</li>
        </for>
    </ul>
</div>